<template>
	<view class="container">
		<!-- 头部 -->
		<view class="top">
			<view class="avator">
				<img :src="personInfo.headImage" alt="">
			</view>
			<span class="nickName">
				{{personInfo.nickname}}
			</span>
			<view class="sex">
				<img v-if="personInfo.sex === '男'" src="@/assets/img/man.png" alt="">
				<img v-if="personInfo.sex === '女'" src="@/assets/img/woman.png" alt="">
			</view>
			<view v-if="personInfo.vip" class="vipTag">
				<img src="@/assets/img/vip.png" alt="">
				<span>{{personInfo.vip}}</span>
			</view>
			<view v-else class="join-vip" @click="goToVip">
				加入VIP
			</view>
			<view v-if="!personInfo.realNameAuth" @click="goToVerify" class="realTag">
				实名认证
			</view>

		</view>
		<!-- 按钮组 -->
		<view class="btnGroup">
			<view @click="goToList('关注')">
				关注
			</view>
			<view @click="goToList('粉丝')">
				粉丝
			</view>
			<view @click="goToList('访客')">
				访客
			</view>
			<view @click="goToList('足迹')">
				足迹
			</view>
		</view>
		<!-- 个人情况 -->
		<view class="section">

			<view class="labels">
				<view class="title">
					<span>个人信息</span>
					<span class="tip" @click="goEditInfo">前往编辑 > </span>
				</view>
				<view class="tags">
					<view class="tag">

						<uni-tag :text="personInfo.wechatNum" type="success" />
					</view>
					<view class="tag">
						<uni-tag :text="personInfo.address" type="warning" />
					</view>
					<view class="tag">
						<uni-tag :text="personInfo.age+'岁'" type="royal" />
					</view>
					<view class="tag">
						<uni-tag :text="personInfo.height+'cm'" type="primary" />
					</view>
					<view class="tag">
						<uni-tag :text="personInfo.weight+'kg'" type="default" />
					</view>
					<view class="tag">
						<uni-tag :text="personInfo.hobby" type="error" />
					</view>
					<view class="tag">
						<uni-tag v-if="education[personInfo.education]"
							:text="education[personInfo.education]&&education[personInfo.education].name"
							type="success" />
					</view>
					<view class="tag">
						<uni-tag :text="personInfo.occupation" type="warning" />
					</view>
					<view class="tag">
						<uni-tag :text="personInfo.family" type="primary" />
					</view>
					<!-- 	<view class="tag">
					<uni-tag text="颜值9分" type="error" />
					</view> -->
					<view class="tag">
						<uni-tag :text="personInfo.constellation" type="royal" />
					</view>
					<view class="tag">
						<uni-tag :text="'年薪'+personInfo.annualIncome+'万'" type="warning" />
					</view>
					<view class="tag">
						<uni-tag :text="localCar[personInfo.car]" type="error" />
					</view>
					<view class="tag">
						<uni-tag :text="localHouse[personInfo.house]" type="default" />
					</view>
					<view class="tag">
						<uni-tag :text="localEmotion[personInfo.emotion]&&localEmotion[personInfo.emotion].name"
							type="default" />
					</view>
				</view>
			</view>
			<view class="declare">
				<text>{{personInfo.introduction}}</text>
			</view>
		</view>
		<!-- 择友要求 -->
		<view class="section">
			<view class="choose">
				<text>择友要求</text>
				<span class="tip" @click="goToRequirement">前往编辑 > </span>
			</view>
			<view class="labels">
				<view class="tags">
					<view class="tag">
						<uni-tag :text="localSex[chooseInfo.sex]" type="success" />
					</view>
					<view class="tag">
						<uni-tag :text="chooseInfo.province+' · '+chooseInfo.city+' · '+chooseInfo.county||'/'"
							type="default" />
					</view>
					<view class="tag">
						<uni-tag :text="(chooseInfo.minHeight||'不限')+' - '+ (chooseInfo.maxHeight||'不限')+' cm'"
							type="primary" />
					</view>
					<view class="tag">
						<uni-tag :text="(chooseInfo.minWeight||'不限')+' - '+(chooseInfo.maxWeight||'不限')+' kg'"
							type="default" />
					</view>
					<view class="tag">
						<uni-tag :text="(chooseInfo.minAge||'不限')+' - '+(chooseInfo.maxAge||'不限')+' 岁'" type="royal" />
					</view>
					<view class="tag">
						<uni-tag :text="education[chooseInfo.education]&&education[chooseInfo.education].name"
							type="success" />
					</view>
					<view class="tag">
						<uni-tag :text="localCar[chooseInfo.car]" type="error" />
					</view>
					<view class="tag">
						<uni-tag :text="localHouse[chooseInfo.house]" type="default" />
					</view>
					<view class="tag">
						<uni-tag :text="localEmotion[chooseInfo.emotion]&&localEmotion[chooseInfo.emotion].name"
							type="primary" />
					</view>
					<view class="tag">
						<uni-tag :text="'年薪'+chooseInfo.annualIncome+'万'" type="warning" />
					</view>
				</view>
			</view>
		</view>
		<!-- 相册管理 -->
		<view class="section">
			<view class="choose">
				<text>相册管理</text>
				<span @click="goToMngAlbum" class="tip">前往编辑 > </span>
			</view>
			<Album @click.native="gotoAlbum" :list="imageList" class="album"></Album>
		</view>
		<!-- list组 -->
		<view class="list">
			<view @click="goTo('/pages/honestIndex/honestIndex')" class="item">
				提升真诚指数
			</view>
			<view @click="goTo('/pages/realnameVerify/realnameVerify')" class="item">
				实名认证
			</view>
			<view @click="goTo('/pages/membership/membership')" class="item">
				成为VIP
			</view>
			<view @click="goTo('/pages/advertise/advertise')" class="item">
				宣传
			</view>
			<view @click="goTo('/pages/adviceEdit/adviceEdit')" class="item">
				建议
			</view>
			<view class="item">
				调查问卷
			</view>
			<view class="item" @click="goTo('/pages/commonPage/commonPage?type=新手帮助')">
				新手帮助
			</view>
		</view>
	</view>
</template>

<script>
	import Album from '../../../pages/PersonalDetail/album.vue';
	import {
		url,
		request,
		login
	} from '@/service/api.js'
	import {
		localData,
		localCar,
		localHouse
	} from '@/pages/tabBar/Discover/data.js'
	export default {
		data() {
			return {
				uni: uni,
				localCar: localCar,
				localSex: ['男', '女'],
				localEmotion: localData[3].submenu,
				localHouse: localHouse,
				education: localData[2].submenu,
				imageList: [],
				personInfo: {},
				chooseInfo: {}
			};
		},
		components: {
			Album
		},
		onShow() {
			this.init()
		},
		mounted() {
			this.init()
		},
		methods: {
			goTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			init() {
				this.getPersonInfo()
				this.getAlbum()
			},
			// 编辑个人信息
			goEditInfo() {
				uni.navigateTo({
					url: '/pages/personalEdit/personalEdit'
				})
			},
			// 编辑择友信息
			goToRequirement() {
				uni.navigateTo({
					url: '/pages/purposeEdit/purposeEdit'
				})
			},
			// 管理相册
			goToMngAlbum() {
				uni.navigateTo({
					url: '/pages/albumMng/albumMng'
				})
			},
			// vip开通
			goToVip() {
				uni.navigateTo({
					url: '/pages/membership/membership'
				})
			},
			// 实名认证
			goToVerify() {
				uni.navigateTo({
					url: '/pages/realnameVerify/realnameVerify'
				})
			},
			getPersonInfo() {
				request(url.getSelfInformation, 'GET', {}).then(res => {
					console.log('person', res)
					this.personInfo = res.data
				})
				request(url.getFrientInfo, 'GET', {}).then(res => {
					console.log('friend', res)
					this.chooseInfo = res.data
				})
			},
			getAlbum() {
				request(url.getAlbum, 'GET', {}).then(res => {
					this.imageList = res.data
					console.log('22222', this.imageList)
				})
			},
			gotoAlbum() {
				uni.navigateTo({
					url: `/pages/PersonalDetail/PersonalAlbum?uid=${this.personInfo?.uid}`
					
				})
			},
			goToList(type) {
				uni.navigateTo({
					url: '/pages/personList/personList?type=' + type,
				})
			}

		}
	}
</script>
<style>
	.uni-tag--primary {
		background-color: #41C4D3;
		border-color: #41C4D3;
	}

	.uni-tag--success {
		background-color: #68BB73;
		border-color: #68BB73;
	}

	.uni-tag--warning {
		background-color: #FCC163;
		border-color: #FCC163;
	}

	.uni-tag--error {
		background-color: #FC9380;
		border-color: #FC9380;
	}

	.uni-tag--default {
		background-color: #B46CB3;
		border-color: #B46CB3;
	}
</style>
<style lang="less" scoped>
	.container {
		margin: 0 10px;
		padding: 10px 0;
		box-sizing: border-box;
		background-color: #fff;
	}

	.top {
		display: flex;
		align-items: center;
		flex-direction: row;
		width: 100%;

		.avator {
			img {
				border-radius: 100px;
				width: 50px;
				height: 50px;
				padding: 10px;
			}
		}

		.nickName {
			color: #666;
			font-size: 18px;
			position: relative;
			margin-right: 5px;
		}

		.sex {
			margin: 0 5px;

			img {
				width: 7px;
				height: 9px;
			}
		}

		.tag {
			padding: 0 3px;
			margin: 0 2px;
			position: relative;
			bottom: 8px;
			color: #444;
			border-radius: 4px;
			font-size: 11px;
		}

		.join-vip {
			width: 47px;
			height: 17px;
			border: 1px solid #FC9380;
			border-radius: 15px;
			font-size: 10px;
			font-family: SimHei;
			color: #FC9380;
			position: absolute;
			right: 20px;
			text-align: center;
			padding: 2px 3px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.vipTag {
			font-size: 10px;
			font-family: SimHei;
			color: #E16531;

			img {
				width: 9px;
				height: 9px;
			}

		}

		.realTag {
			margin-left: 10px;
			background: #8DCFF4;
			border-radius: 3px;
			font-size: 8px;
			font-family: SimHei;
			color: #FFFFFF;
			padding: 1px 3px;
		}
	}

	.btnGroup {
		padding: 0 10px 10px;

		view {
			// background-color: antiquewhite;
			padding: 3px 13px;
			border-radius: 100px;
			height: 21px;
			border: 1px solid #FC9380;
			color: #FC9380;
			font-size: 13px;
			display: flex;
			align-items: center;
		}

		// border-top: 1px solid #ebebeb; 
		border-bottom: 10px solid #F5F5F5;
		font-size: 16px;
		color: #666;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}

	.tip {
		font-size: 13px;
		color: #888;
	}

	.labels {
		.title {
			font-size: 13px;
			color: #888;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 5px 0;
			margin: 0 10px;
			align-items: baseline;
			border-bottom: 1px solid #cdcdcd;
		}

		// padding: 5px 0px 5px 0px;
		// margin-top: 10px;

		.tags {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			padding: 5px;
			margin-top: 5px;

			.tag {
				min-height: 30px;
			}

			/deep/ .uni-tag {
				margin: 5px 5px;
			}
		}
	}

	.declare {
		margin: 0 10px 0 10px;
		font-size: 13px;
		padding: 10px;
		background-color: #DADADA;
		border-radius: 5px;
		color: #888;
	}

	.choose {
		padding: 10px 0;
		margin: 0 10px;
		font-size: 13px;
		color: #888;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: baseline;
		border-bottom: 1px solid #cdcdcd;

		view {
			background-color: #eee;
			font-size: 11px;
			border-radius: 4px;
			color: #444;
			padding: 2px 4px;
		}
	}

	.section {
		padding-bottom: 10px;
		border-bottom: 10px solid #f5f5f5;
	}

	.album {
		padding: 15px 0;
	}

	.list {
		color: #888;
		font-size: 13px;

		.item {
			margin: 0 10px;
			border-bottom: 1px solid #ebebeb;
			height: 50px;
			display: flex;
			align-items: center;
		}
	}
</style>
